<template>
  <t-image-viewer ref="imageViewerRef" :images="[src]">
    <template #trigger="{ open }">
      <t-image
        :style="{ width: width + 'px', height: height + 'px', cursor: 'pointer' }"
        :src="src"
        alt=""
        :error="renderCustomIcon"
        :loading="renderCustomIcon"
        @click.stop="open"
      />
      <div class="img-mask">
        <browse-icon class="icon" @click="open" />
        <div class="divide"></div>
        <delete-icon class="icon" @click="emits('del')" />
        <div class="divide"></div>
        <edit-icon class="icon" @click="emits('edit')" />
      </div>
    </template>
  </t-image-viewer>
</template>

<script setup lang="tsx">
import { BrowseIcon, DeleteIcon, EditIcon, ImageErrorIcon } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

defineProps({
  src: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 78,
  },
  height: {
    type: Number,
    default: 78,
  },
});

const emits = defineEmits(['del', 'edit']);

const renderCustomIcon = () => <ImageErrorIcon size="20" />;

const imageViewerRef = ref();
</script>

<style lang="less" scoped>
.img-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(0 0 0 / 60%);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;

  &:hover {
    opacity: 1;
  }

  .icon {
    color: #fff;
    cursor: pointer;

    &:hover {
      color: rgb(255 255 255 / 80%);
    }
  }

  .divide {
    height: 16px;
    width: 1px;
    background: white;
    margin: 0 10px;
  }
}
</style>
